<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5.0 Transitional//EN" "http://www.w3.org/TR/html5/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Cache-control" content="public">
    <meta http-equiv="content-language" content="de-DE">
    <title>HGON e.V. Arbeitskreis Frankfurt - Vogelstimmenquiz</title>

    <link rel="stylesheet" type="text/css" href="css/hgon_style.css">
  <script type="text/javascript">
    var voegel= new Array();
    voegel[ 0]= new Array("Amsel_AUDIO"            , "Amsel_IMG"            , "die Amsel");
    voegel[ 1]= new Array("Kohlmeise_AUDIO"        , "Kohlmeise_IMG"        , "die Kohlmeise");
    voegel[ 2]= new Array("Haussperling_AUDIO"     , "Haussperling_IMG"     , "der Haussperling");
    voegel[ 3]= new Array("Buchfink_AUDIO"         , "Buchfink_IMG"         , "der Buchfink");
    voegel[ 4]= new Array("Rotkehlchen_AUDIO"      , "Rotkehlchen_IMG"      , "das Rotkehlchen");
    voegel[ 5]= new Array("Goldammer_AUDIO"        , "Goldammer_IMG"        , "die Goldammer");
    voegel[ 6]= new Array("Feldlerche_AUDIO"       , "Feldlerche_IMG"       , "die Feldlerche");
    voegel[ 7]= new Array("Nachtigall_AUDIO"       , "Nachtigall_IMG"       , "die Nachtigall");
    voegel[ 8]= new Array("Zaunkoenig_AUDIO"       , "Zaunkoenig_IMG"       , "der Zaunkönig");
    voegel[ 9]= new Array("Moenchsgrasmuecke_AUDIO", "Moenchsgrasmuecke_IMG", "die Mönchsgrasmücke");
    voegel[10]= new Array("Gartenrotschwanz_AUDIO" , "Gartenrotschwanz_IMG" , "der Gartenrotschwanz");
    voegel[11]= new Array("Gruenspecht_AUDIO"      , "Gruenspecht_IMG"      , "der Grünspecht");
    voegel[12]= new Array("Ringeltaube_AUDIO"      , "Ringeltaube_IMG"      , "die Ringeltaube");
    voegel[13]= new Array("Eisvogel_AUDIO"         , "Eisvogel_IMG"         , "der Eisvogel");
    voegel[14]= new Array("Kuckuck_AUDIO"          , "Kuckuck_IMG"          , "der Kuckuck");
    voegel[15]= new Array("Maeusebussard_AUDIO"    , "Maeusebussard_IMG"    , "der Mäusebussard");
    voegel[16]= new Array("Steinkauz_AUDIO"        , "Steinkauz_IMG"        , "der Steinkauz");
    voegel[17]= new Array("Waldkauz_AUDIO"         , "Waldkauz_IMG"         , "der Waldkauz");
    voegel[18]= new Array("Graureiher_AUDIO"       , "Graureiher_IMG"       , "der Graureiher");

    var lastQuizVogel= -1;
    var lastLastQuizVogel= -1;
    var lastLastLastQuizVogel= -1;
    var quizVogel= -1;
    var correctCounter= 0;

    function resetVogelStatus(){
        isPlaying= 0;
        quizVogel= -1;

        for(var i= 0; i < 19; i++){
            if(document.getElementById(voegel[i][1]) != null){
                document.getElementById(voegel[i][0]).pause();
                // document.getElementById(voegel[i][0]).currentTime= 0;
                document.getElementById(voegel[i][1]).style.border= "5px solid #fffffe";
            }
        }
    }

    function quizPlay(){
        /*
        var output= "";
        for(var i= 0; i < 100; i++){
            quizVogel= Math.floor((Math.random()*1000)%18, 0);
            output+= "Random= "+quizVogel+" --> "+voegel[quizVogel]+" <br />"
        }
        quizVogel= Math.floor((Math.random()*1000)%18, 0);

        document.write(output);
        */

        resetVogelStatus();

        while(quizVogel == -1 || lastQuizVogel == quizVogel || lastLastQuizVogel == quizVogel || lastLastLastQuizVogel == quizVogel)
            quizVogel= Math.floor((Math.random()*1000)%19, 0);

        lastLastLastQuizVogel= lastLastQuizVogel;
        lastLastQuizVogel= lastQuizVogel;
        lastQuizVogel= quizVogel;

        if(document.getElementById(voegel[quizVogel][0]) == null){
            document.write("voegel[quizVogel][0] == null {"+voegel[quizVogel][0]+"} quizVogel="+quizVogel);
        }

        try{
            document.getElementById(voegel[quizVogel][0]).currentTime= 0;
        }
        catch(exception){
            if(window.console && console.error("Error:" + exception));
        }

        document.getElementById(voegel[quizVogel][0]).play();
        var t= setTimeout("resetVogelStatus()", 90000);
    }

    function quizAnswer(audio_Id, image_Id){
        document.getElementById(voegel[quizVogel][0]).pause();
        rewind(voegel[quizVogel][0]);
        if(audio_Id == voegel[quizVogel][0]){
            document.getElementById(image_Id).style.border="5px solid #78FF78";
            correctCounter= correctCounter+1;
            var mess= (correctCounter >= 3)?correctCounter+' mal die richtige Antwort! Nochmal?':'Richtige Antwort! Gleich nochmal?';
            var r= confirm(mess);
            if(r == true)
            {
                quizVogel= -1;
                quizPlay();
            }
            else
            {
              quizVogel= -1;
              rewind(voegel[quizVogel][0]);
            }
        }
        else{
            document.getElementById(image_Id).style.border="5px solid #FF0000";
            document.getElementById(voegel[quizVogel][1]).style.border="5px solid #78FF78";
            correctCounter= 0;

            var r=confirm('Leider nicht richtig - es war '+voegel[quizVogel][2]+'. Gleich nochmal versuchen.');
            if(r == true)
            {
                quizVogel= -1;
                quizPlay();
            }
            else
            {
              quizVogel= -1;
              rewind(voegel[quizVogel][0]);
            }
        }

        try
        {
            rewind(audio_Id);
        }
        catch(exception)
        {
            if(window.console && console.error("Error:" + exception));
        }
    }

    function playAudio(audio_Id, image_Id){
        if(quizVogel != -1){
            quizAnswer(audio_Id, image_Id);
            return;
        }

        if(typeof isPlaying == 'undefined'){
            isPlaying= 0;
        }

        if(isPlaying == audio_Id){
            return; // continue playing on double click
        }

        if(isPlaying != 0){ // do not play more than one file at a time
            alert('bitte warten, bis der Vogel seinen Gesang beendet hat');
            return;
        }

        resetVogelStatus();

        document.getElementById(audio_Id).addEventListener(
                'ended'
                , function stopPlaying(){
                     document.getElementById(image_Id).style.border="5px solid #fffffe";
                     isPlaying= 0;
                   }
                , false
                );

      isPlaying= audio_Id;
      document.getElementById(audio_Id).play();
      document.getElementById(image_Id).style.border="5px solid #78FF78";
    }

    function rewind(audio_Id){
        try{
            document.getElementById(audio_Id).currentTime= 0;
        }
        catch(exception){
            if(window.console && console.error("Error:" + exception));
        }
    }

    /* disabling text selection in order to avoid ugly overlay */
    function disableSelect(el){
        if(el.addEventListener){
            el.addEventListener("mousedown",disabler,"false");
        }
        else {
            el.attachEvent("onselectstart",disabler);
        }
    }

    function disabler(e){
        if(e.preventDefault){
            e.preventDefault();
        }
        return false;
    }

</script>
</head>
<body>
  <div>
    <h1 unselectable="on">HGON e.V. Arbeitskreis Frankfurt - Vogelstimmenquiz</h1>
  </div>
  <table unselectable="on">
    <tr unselectable="on">
      <td unselectable="on">
        <div id="Vogelname" unselectable="on">Amsel</div>
         <img id="Amsel_IMG"
              onClick="playAudio('Amsel_AUDIO', 'Amsel_IMG');"
              src="http://www.beevi.de/images/amsel_300x244.jpg"
              width="300"
              height="200"  unselectable="on"/>
         <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
         <br />
         <div id="hidden">
         <audio id="Amsel_AUDIO" controls="false">
           <source src="http://www.beevi.de/audio/amsel_normalized_15secs.ogg" type="audio/ogg" />
           <source src="http://www.beevi.de/audio/amsel_normalized_15secs.mp3" type="audio/mp3" />
                 Your browser does not support the audio tag.
        </audio>
        </div>
      </td>
      <td unselectable="on">
       <div id="Vogelname" unselectable="on">Kohlmeise</div>
       <img id="Kohlmeise_IMG" src="http://www.beevi.de/images/kohlmeise.jpg" width="300" height="200"
            onClick="playAudio('Kohlmeise_AUDIO', 'Kohlmeise_IMG');"
        />
       <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
       <br />
       <div id="hidden">
        <audio id="Kohlmeise_AUDIO" controls="false">
            <source src="http://www.beevi.de/audio/Kohlmeise_normalized_11secs.ogg" type="audio/ogg" />
            <source src="http://www.beevi.de/audio/Kohlmeise_normalized_11secs.mp3" type="audio/mp3" />
                Your browser does not support the audio tag. </audio>
       </div>
    </td>
    <td unselectable="on">
        <div id="Vogelname" unselectable="on">Haussperling</div>
        <img id="Haussperling_IMG"
             onClick="playAudio('Haussperling_AUDIO', 'Haussperling_IMG');"
             src="http://www.beevi.de/images/haussperling_300x200.jpg" width="300" height="200"
             />
        <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
        <br />
        <div id="hidden">
           <audio id="Haussperling_AUDIO">
           <source src="http://www.beevi.de/audio/haussperling_normalized_10secs.ogg" type="audio/ogg" />
           <source src="http://www.beevi.de/audio/haussperling_normalized_10secs.mp3" type="audio/mp3" />
           Your browser does not support the audio tag.
         </audio>
        </div>
      </td>
      <td unselectable="on">
          <div id="Vogelname" unselectable="on">Buchfink</div>
            <img id="Buchfink_IMG" src="http://www.beevi.de/images/buchfink_300x200.jpg" width="300" height="200"
             onClick="playAudio('Buchfink_AUDIO', 'Buchfink_IMG');"
            />
            <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
            <br />
        <audio id="Buchfink_AUDIO">
          <source src="http://www.beevi.de/audio/buchfink_normalized_10secs.ogg" type="audio/ogg" />
          <source src="http://www.beevi.de/audio/buchfink_normalized_10secs.mp3" type="audio/mp3" />
          Your browser does not support the audio tag.
        </audio>
      </td>
            <td unselectable="on">
               <div id="Vogelname" unselectable="on">Rotkehlchen</div>
               <img id="Rotkehlchen_IMG" src="http://www.beevi.de/images/rotkehlchen.jpg" width="300" height="200"
                     onClick="playAudio('Rotkehlchen_AUDIO', 'Rotkehlchen_IMG');"
                    />
               <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
               <br />
                <audio id="Rotkehlchen_AUDIO">
                    <source src="http://www.beevi.de/audio/rotkehlchen_11secs.ogg" type="audio/ogg" />
                    <source src="http://www.beevi.de/audio/rotkehlchen_11secs.mp3" type="audio/mp3" />
                    Your browser does not support the audio tag.
                </audio>
            </td>
    </tr>
<!-- =============================================================================================================== -->
    <tr unselectable="on">
      <td unselectable="on">
          <div id="Vogelname" unselectable="on">Goldammer</div>
                <img id="Goldammer_IMG"
                     onClick="playAudio('Goldammer_AUDIO', 'Goldammer_IMG');"
                     src="http://www.beevi.de/images/goldammer_silent_serie2012_600x400.jpg"
                     width="300"
                     height="200" />
                <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
               <br />
              <div id="hidden">
        <audio id="Goldammer_AUDIO">
          <source src="http://www.beevi.de/audio/goldammer_normalized_9secs.ogg" type="audio/ogg" />
          <source src="http://www.beevi.de/audio/goldammer_normalized_9secs.mp3" type="audio/mp3" />
          Your browser does not support the audio tag.
        </audio>
        </div>
      </td>
      <td unselectable="on">
         <div id="Vogelname" unselectable="on">Feldlerche</div>
              <img id="Feldlerche_IMG" src="http://www.beevi.de/images/feldlerche_300x216.jpg" width="300" height="200"
                     onClick="playAudio('Feldlerche_AUDIO', 'Feldlerche_IMG');"
              />
           <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
              <br />
        <audio id="Feldlerche_AUDIO">
          <source src="http://www.beevi.de/audio/feldlerche_normalized_12secs.ogg" type="audio/ogg" />
          <source src="http://www.beevi.de/audio/feldlerche_normalized_12secs.mp3" type="audio/mp3" />
          Your browser does not support the audio tag.
        </audio>
      </td>
      <td unselectable="on">
                <div id="Vogelname" unselectable="on">Nachtigall</div>
                <img id="Nachtigall_IMG" src="http://www.beevi.de/images/nachtigall.jpg" width="300" height="200"
                     onClick="playAudio('Nachtigall_AUDIO', 'Nachtigall_IMG');"
                />
                <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
                <br />
        <audio id="Nachtigall_AUDIO">
          <source src="http://www.beevi.de/audio/nachtigall_12secs.ogg" type="audio/ogg" />
          <source src="http://www.beevi.de/audio/nachtigall_12secs.mp3" type="audio/mp3" />
          Your browser does not support the audio tag.
        </audio>
      </td>
      <td unselectable="on">
        <div id="Vogelname" unselectable="on">Zaunkönig</div>
          <img id="Zaunkoenig_IMG" src="http://www.beevi.de/images/Zaunkoenig_Frank.Vassen.jpg" width="300" height="200"
               onClick="playAudio('Zaunkoenig_AUDIO', 'Zaunkoenig_IMG');"
          />
         <div id="Copyright" unselectable="on">(c) 2009 Frank Vassen</div>
          <br />
        <audio id="Zaunkoenig_AUDIO">
          <source src="http://www.beevi.de/audio/zaunkoenig_12secs.ogg" type="audio/ogg" />
          <source src="http://www.beevi.de/audio/zaunkoenig_12secs.mp3" type="audio/mp3" />
          Your browser does not support the audio tag.
        </audio>
      </td>
            <td unselectable="on">
                <div id="Vogelname" unselectable="on">Mönchsgrasmücke</div>
                <img id="Moenchsgrasmuecke_IMG" src="http://www.beevi.de/images/moenchsgrasmuecke_675x450.jpg" width="300" height="200"
                     onClick="playAudio('Moenchsgrasmuecke_AUDIO', 'Moenchsgrasmuecke_IMG');"
                />
                <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
                <br />
                <audio id="Moenchsgrasmuecke_AUDIO">
                    <source src="http://www.beevi.de/audio/moenchsgrasmuecke_12secs.ogg" type="audio/ogg" />
                    <source src="http://www.beevi.de/audio/moenchsgrasmuecke_12secs.mp3" type="audio/mp3" />
                    Your browser does not support the audio tag.
                </audio>
            </td>
    </tr>
<!-- =============================================================================================================== -->
    <tr unselectable="on">
      <td unselectable="on">
                <div id="Vogelname" unselectable="on">Gartenrotschwanz</div>
                <img id="Gartenrotschwanz_IMG" src="http://www.beevi.de/images/gartenrotschwanz_300x200.jpg" width="300" height="200"
                     onClick="playAudio('Gartenrotschwanz_AUDIO', 'Gartenrotschwanz_IMG');"
                />
                <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
                <br />
        <audio id="Gartenrotschwanz_AUDIO">
          <source src="http://www.beevi.de/audio/gartenrotschwanz_normalized_11secs.ogg" type="audio/ogg" />
          <source src="http://www.beevi.de/audio/gartenrotschwanz_normalized_11secs.mp3" type="audio/mp3" />
          Your browser does not support the audio tag.
        </audio>
      </td>
      <td unselectable="on">
                <div id="Vogelname" unselectable="on">Grünspecht</div>
                <img id="Gruenspecht_IMG" src="http://www.beevi.de/images/gruenspecht_600x400.jpg" width="300" height="200"
                     onClick="playAudio('Gruenspecht_AUDIO', 'Gruenspecht_IMG');"
                />
                <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
                <br />
        <audio id="Gruenspecht_AUDIO">
          <source src="http://www.beevi.de/audio/grünspecht_normalized_10secs.ogg" type="audio/ogg" />
          <source src="http://www.beevi.de/audio/grünspecht_normalized_10secs.mp3" type="audio/mp3" />
          Your browser does not support the audio tag.
        </audio>
      </td>
      <td unselectable="on">
                <div id="Vogelname" unselectable="on">Ringeltaube</div>
                <img id="Ringeltaube_IMG" src="http://www.beevi.de/images/ringeltaube.jpg" width="300" height="200"
                     onClick="playAudio('Ringeltaube_AUDIO', 'Ringeltaube_IMG');"
                />
                <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
                <br />
        <audio id="Ringeltaube_AUDIO">
          <source src="http://www.beevi.de/audio/ringeltaube_9secs.ogg" type="audio/ogg" />
          <source src="http://www.beevi.de/audio/ringeltaube_9secs.mp3" type="audio/mp3" />
          Your browser does not support the audio tag.
        </audio>
      </td>
      <td unselectable="on">
                <div id="Vogelname" unselectable="on">Eisvogel</div>
                <img id="Eisvogel_IMG" src="http://www.beevi.de/images/eisvogel_600x400.jpg" width="300" height="200"
                     onClick="playAudio('Eisvogel_AUDIO', 'Eisvogel_IMG');"
                />
                <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
                <br />
        <audio id="Eisvogel_AUDIO">
          <source src="http://www.beevi.de/audio/eisvogel_normalized_10secs.ogg" type="audio/ogg" />
          <source src="http://www.beevi.de/audio/eisvogel_normalized_10secs.mp3" type="audio/mp3" />
          Your browser does not support the audio tag.
        </audio>
      </td>
            <td unselectable="on">
                <div id="Vogelname" unselectable="on">Kuckuck</div>
                <img id="Kuckuck_IMG" src="http://www.beevi.de/images/kuckuck_600x400.jpg" width="300" height="200"
                     onClick="playAudio('Kuckuck_AUDIO', 'Kuckuck_IMG');"
                />
                <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
                <br />
                <audio id="Kuckuck_AUDIO">
                    <source src="http://www.beevi.de/audio/kuckuck_10secs.ogg" type="audio/ogg" />
                    <source src="http://www.beevi.de/audio/kuckuck_10secs.mp3" type="audio/mp3" />
                    Your browser does not support the audio tag.
                </audio>
            </td>
    </tr>
<!-- =============================================================================================================== -->
    <tr unselectable="on">
      <td unselectable="on">
                <div id="Vogelname" unselectable="on">Mäusebussard</div>
                <img id="Maeusebussard_IMG" src="http://www.beevi.de/images/maeusebussard_600x400_ausschnitt.jpg" width="300" height="200"
                     onClick="playAudio('Maeusebussard_AUDIO', 'Maeusebussard_IMG');"
                />
                <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
                <br />
        <audio id="Maeusebussard_AUDIO">
          <source src="http://www.beevi.de/audio/maeusebussard_12secs.ogg" type="audio/ogg" />
          <source src="http://www.beevi.de/audio/maeusebussard_12secs.mp3" type="audio/mp3" />
          Your browser does not support the audio tag.
        </audio>
      </td>
      <td unselectable="on">
                <div id="Vogelname" unselectable="on">Steinkauz</div>
                <img id="Steinkauz_IMG" src="http://www.beevi.de/images/steinkauz.jpg" width="300" height="200"
                     onClick="playAudio('Steinkauz_AUDIO', 'Steinkauz_IMG');"
                />
                <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
                <br />
        <audio id="Steinkauz_AUDIO">
          <source src="http://www.beevi.de/audio/steinkauz_10secs.ogg" type="audio/ogg" />
          <source src="http://www.beevi.de/audio/steinkauz_10secs.mp3" type="audio/mp3" />
          Your browser does not support the audio tag.
        </audio>
      </td>
      <td unselectable="on">
                <div id="Vogelname" unselectable="on">Waldkauz</div>
                <img id="Waldkauz_IMG" src="http://www.beevi.de/images/waldkauz.jpg" width="300" height="200"
                     onClick="playAudio('Waldkauz_AUDIO', 'Waldkauz_IMG');"
                />
                <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
                <br />
        <audio id="Waldkauz_AUDIO">
          <source src="http://www.beevi.de/audio/waldkauz_14secs.ogg" type="audio/ogg" />
          <source src="http://www.beevi.de/audio/waldkauz_14secs.mp3" type="audio/mp3" />
          Your browser does not support the audio tag.
        </audio>
      </td>
      <td unselectable="on">
                <div id="Vogelname" unselectable="on">Graureiher</div>
                <img id="Graureiher_IMG" src="http://www.beevi.de/images/graureiher_300x200.jpg" width="300" height="200"
                     onClick="playAudio('Graureiher_AUDIO', 'Graureiher_IMG');"
                />
                <div id="Copyright" unselectable="on">(c) 2012 Stefan Wehr / HGON e. V.</div>
                <br />
        <audio id="Graureiher_AUDIO">
          <source src="http://www.beevi.de/audio/Graureiher_normalized_10secs.ogg" type="audio/ogg" />
          <source src="http://www.beevi.de/audio/Graureiher_normalized_10secs.mp3" type="audio/mp3" />
          Your browser does not support the audio tag.
        </audio>
      </td>
      <td unselectable="on">
          <div id="Vogelname" onClick="quizPlay();">Hier klicken um das Quiz zu starten</div>
          <img src="http://www.beevi.de/images/Grauer_Button_v1.jpeg" width="300" height="200"
               onClick="quizPlay();"
          />
          <div id="Copyright" onClick="quizPlay();">(c) 2012 HGON e. V.</div>
          <br />
      </td>
    </tr>
  </table>
</body>
</html>